<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">

        <todo-head>

            <template #title>{{title}}</template>

            <template #subtitle>{{subtitle}}</template>

        </todo-head>

        <todo-input @add-to-todo='addTodos' v-model="inputValue" @keydwon='keyDwonTodo'></todo-input>

        <todo-list :todos='todos' @delete-item='isDelete'></todo-list>

    </div>
    <script src="../libs/vue/vue.js"></script>
    <script>
        const vw = new Vue({
            el: '#app',
            data: {
                title: '待办事项列表',
                subtitle: 'Todolist...',
                todos: [{
                    id: 1,
                    title: '所发生的水电费',
                    completed: true
                }],
                inputValue: ''
            },
            created() {
                fetch('https://jsonplaceholder.typicode.com/todos')
                    .then(res => res.json())
                    .then(data => this.todos = data)
            },
            methods: {
                isDelete(id) {
                    this.todos = this.todos.filter(todo => todo.id !== id)
                },
                addTodos() {
                    this.todos.unshift({
                        id: Math.random(),
                        title: this.inputValue,
                        completed: false
                    })
                    this.inputValue = ''
                },
                keyDwonTodo(e) {
                    console.log(e)

                    if (keyCode === 13)
                        this.addTodos()
                }
            },
            components: {
                TodoHead: {
                    template: `
                    <div>
                        <h1><slot name="title"></slot></h1>
                        <h3><slot name="subtitle"></slot></h3>
                    </div>
                    `,
                    props: {
                        title: String,
                        subtitle: String,
                    }

                },
                TodoInput: {
                    template: `
                    <div>
                        <input type='text' :value='value' v-on='allListeners'>
                        <button @click="$emit('add-to-todo')">添加</button>
                    </div>    
                    `,
                    props: ['value'],
                    computed: {
                        allListeners() {

                            const _self = this
                            return {
                                ...this.$listeners,
                                input(e) {
                                    _self.$emit('input', e.target.value)
                                    console.log(e.target.value)
                                }
                            }
                        }
                    }
                },
                TodoList: {
                    template: `
                    <ol>
                        <TodoItme
                        v-for='todo in todos'
                        :todo='todo'
                        :key='todo.id'
                        @delete-item="$emit('delete-item', todo.id)"
                        ></TodoItme>
                    </ol>
                    `,
                    props: {
                        todos: Array
                    },
                    components: {
                        TodoItme: {
                            template: `
                            <li>
                            --
                                {{todo.title}}
                                --
                                {{status}}
                                --
                                <button @click="todo.completed = !todo.completed">修改状态</button>
                                --
                                <button @click="$emit('delete-item')">删除</button>
                            </li>
                            `,
                            props: ['todo'],
                            computed: {
                                status() {
                                    return this.todo.completed ? '已完成' : '未完成'
                                }
                            },
                        }
                    }
                },
            },

        })
    </script>
</body>

</html>